<template>
  <div class="commonTable" :v-loading="config.loading" >
    <el-table
      border
      stripe
      show-overflow-tooltip
      :data="tableData"
      style="width: 100%"
      height="600"
    >
      <el-table-column
        resizable
        width="180"
        align="center"
        label="序号"
        type="index"
      >
      </el-table-column>
      <el-table-column
        width="260"
        align="center"
        v-for="item in tableLabel"
        :prop="item.prop"
        :label="item.label"
        :key="tableLabel.prop"
      >
      </el-table-column>
       <el-table-column
      fixed="right"
      label="操作"
      width="180">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="plain" size="small">编辑 </el-button>
        <el-button  type="danger" size="small" @click="handDelete(scope.row)">删除</el-button>
      
      </template>
    </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="config.total"
      :current-page.sync='config.page' @current-change='changePage'
    ></el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    tableData: Array,
    tableLabel: Array,
    config: Object,
  },
  methods: {
    //向父元素触发换页的方法
    changePage(){
      this.$emit('changePage');
    },
    //向父元素触发编辑用户的方法
    handleClick(row){
      this.$emit('editInfo', row);
    },
    //向父元素触发删除用户的方法
    handDelete(row){
      this.$emit('deleteUser',row);
    }
  }
};
</script >


<style lang='scss' scoped>
// 用相对定位是为了下面的子元素可以相对自己定位
.commonTable{
  postion:relative;
}
.el-pagination{
 position: absolute;
 right: 20px;
 bottom:50px
}
</style>